<!--
 * @Author: yyf
 * @Date: 2024年7月10日 19:21:03
 * @LastEditTime: 2024年7月10日 19:20:57
 * @LastEditors: yyf
 * @Description: 系统管理-数据监控-按表查询
-->
<template>
  <div class="mainTable">
    <div class="tablePage" v-loading="tableLoading">


      <div class="search">

        <!-- <span class="search-text">监控选项</span>
        <el-select clearable v-model="query.monitorType" placeholder="" class="search-input">
          <el-option v-for="vv in monitorType" :key="vv.value" :label="vv.label" :value="vv.value"></el-option>
        </el-select> -->

        <!-- 表中文名接口 -->
        <!-- <span class="search-text">表中文名</span>
        <el-select clearable v-model="query.tableNameCh" placeholder="请选择" class="search-input"
          @change="changeTableNameCh">
          <el-option v-for="vv in tableNameCh" :key="vv.value" :label="vv.label" :value="vv.value"></el-option>
        </el-select>

        <span class="search-text">时间粒度</span>
        <el-select clearable v-model="query.unit" placeholder="" class="search-input" disabled>
          <el-option v-for="vv in unit" :key="vv.value" :label="vv.label" :value="vv.value"></el-option>
        </el-select> -->


        <!-- 
        <span class="search-text">查询时间</span>
        <el-date-picker v-model="searchTimeSpan" :type="'daterange'" range-separator="至" placeholder="请输入时间"
          :picker-options="pickerOptions" class="search-input  dateTime-picker" :format="'yyyy-MM-dd'"
          :value-format="'yyyy-MM-dd'"></el-date-picker> -->

        <div class="header-query">
          <span class="search-text">开始时间</span>
          <el-date-picker v-model="query.startDate" :picker-options="pickerOptions"  :clearable="false"
            class="search-input" format="yyyy-MM-dd"  value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>
        <div class="header-query">
          <span class="search-text">结束时间</span>
          <el-date-picker v-model="query.endDate" :picker-options="pickerOptions"  :clearable="false"
            class="search-input" format="yyyy-MM-dd"  value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>

        <!-- <el-date-picker v-model="v.value" :type="'datetimerange'" range-separator="至"
          :start-placeholder="v.placeholder[0]" :clearable="false" :end-placeholder="v.placeholder[1]"
          :picker-options="pickerOptions" class="search-input dateTime-picker" :format="'yyyy-MM-dd HH:mm:ss'"
          :value-format="'yyyy-MM-dd HH:mm:ss'">
        </el-date-picker> -->

        <div class="search-btn" @click="getTableData()">
          <div class="btn-img"></div>刷新
        </div>

        <!-- refreshDataMonitor -->
        <!-- <div class="add-btn" @click="refreshTableData()">
          <div class="btn-img"></div>刷新
        </div> -->

      </div>
      <div class="base-table">
        <el-table highlight-current-row :data="tableData" :header-cell-style="{ 'text-align': 'left' }" height="100%">
          <el-table-column v-for="v in tableItems" :key="v.prop" :prop="v.prop" :label="v.name"
            :align="v.align ?? 'left'" :width="v.width ? v.width : '320px'" :header-align="v.headerAlign ?? 'left'">
            <template slot-scope="scope">

              <!-- 用户类型赋值 -->
              <!-- <span v-if="v.prop == 'roleType'"> {{ getRoleStr(scope.row[v.prop]) }}</span>
              <span v-else-if="scope.row[v.prop] !== ''"> {{ scope.row[v.prop] }}</span>
              <span v-else>---</span> -->
              <span>{{ scope.row[v.prop] }}</span>

            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="pagination">
        <el-pagination :page-size="pagination.pageSize" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="pagination.currentPage" :total="pagination.total"
          :page-sizes="[15, 50, 100, 300]" background layout="total,sizes, prev, pager, next, jumper"></el-pagination>
      </div>

    </div>
  </div>
</template>
<script>

import Vue from "vue"
import { service } from "@/services/backServices"
import dayjs from "dayjs"

export default {
  name: "queryDate",
  data() {

    return {

      tableLoading: false,
      //表格参数
      pagination: {
        total: 0,
        currentPage: 1,
        pageSize: 100,
      },
      //搜索使用参数
      searchTimeSpan: [dayjs(new Date()).add(-1, 'months').format("YYYY-MM-DD"), dayjs(new Date()).format("YYYY-MM-DD")],

      tableNameCh: [
        // { label: "淘宝客竞品推广日表", value: "淘宝客竞品推广日表" },
        // { label: "淘宝客竞品推广日统计表", value: "淘宝客竞品推广日统计表" },
        // { label: "抖音竞品GMV日表", value: "抖音竞品GMV日表" },
        // { label: "抖音竞品GMV日表详细", value: "抖音竞品GMV日表详细" },
      ],

      unit: [
        { label: "小时", value: "小时" },
        { label: "日", value: "日" },
        { label: "周", value: "周" },
        { label: "月", value: "月" },
        { label: "年", value: "年" },
      ],

      // 按表查询与刷新”/"按日期刷新全部日表
      // monitorType: [
      //   { label: "按表查询与刷新", value: "按表查询与刷新" },
      //   { label: "按日期刷新", value: "按日期刷新" },
      // ],

      query: {
        // tableNameCh: '',
        // unit: '',
        startDate: "",
        endDate: "",
        // monitorType: "按表查询与刷新",
      },

      timeType: '日',

      //表格数据
      tableItems: [
        // { name: '插入该条数据记录的时间', prop: "create_time" },
        { name: '数据统计时间', prop: "数据统计时间", width: "200px" },
        { name: '表英文名', prop: "表英文名" },
        { name: '表中文名', prop: "表中文名", width: "200px" },
        { name: '统计单位', prop: "统计单位" },
        { name: '记录数量', prop: "记录数量", align: "center", headerAlign: "center", width: "110px" },
        { name: '缺失字段列表英文', prop: "缺失字段列表英文" },
        { name: '缺失字段列表中文', prop: "缺失字段列表中文" },
        // { name: '是否有不正常缺失', prop: "abnormal_miss" },
      ],
      tableData: [],

      pickerOptions: {

        // shortcuts: [
        //   {
        //     text: "最近一天",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
        //       picker.$emit("pick", [start, end]);
        //     },
        //   },
        //   {
        //     text: "最近两天",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
        //       picker.$emit("pick", [start, end]);
        //     },
        //   },
        //   {
        //     text: "最近三天",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
        //       picker.$emit("pick", [start, end]);
        //     },
        //   }
        // ],
        disabledDate: (time) => {
          // return time.getTime() > Date.now() - 8.64e7;
          return time.getTime() > Date.now(); //禁止选今日之后
        },
      },
    };
  },

  mounted() {
    //初始化表格数据
    // this.getTableData();

    let aa = dayjs(1722502876977).format('YYYY-MM-DD HH:mm:ss');

    console.log(aa)
  },

  methods: {



    object2FormData(obj) {
      const formData = new FormData();
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          formData.append(key, obj[key]);
        }
      }
      return formData;
    },


    //表格参数改变触发
    handleSizeChange: function (val) {
      this.pagination.pageSize = val;
      this.setTableData();
    },
    handleCurrentChange: function (currentPage) {
      this.pagination.currentPage = currentPage;
      this.setTableData();
    },

    setTableData() {
      this.tableData = this.tableAllData.slice(
        (this.pagination.currentPage - 1) * this.pagination.pageSize,
        this.pagination.currentPage * this.pagination.pageSize
      )
    },

    //表格参数改变触发
    handleSizeChange: function (val) {
      this.pagination.pageSize = val;
      this.setTableData();
    },
    handleCurrentChange: function (currentPage) {
      this.pagination.currentPage = currentPage;
      this.setTableData();
    },

    //#region 排序相关
    handleSortChange({ prop, order }) {
      this.sortCol = prop;
      this.orderCol = order;
      this.getTableData()
    },
    //#end region

    //修改粒度方法
    handleChangeTime(val) {

      let timeHash = {
        年: 'year',
        月: 'month',
        // 周: 'week',
        周: 'date',
        日: 'date',
        小时: 'datetime',
      }

      this.timeType = timeHash[val]

      // this.pagination.currentPage = 1;
      // this.getTableData()
    },

    refreshTableData() {
      this.tableLoading = true
      let timeStamp = {
        年: 'YYYY',
        月: 'YYYY-MM',
        周: 'YYYY-MM-DD',
        日: 'YYYY-MM-DD',
        小时: 'YYYY-MM-DD HH:mm:ss',
      }
      this.query.startDate = dayjs(this.query.startDate).format("YYYY-MM-DD")
      this.query.endDate = dayjs(this.query.endDate).format("YYYY-MM-DD")
      console.log(this.query.startDate)
      // this.query.startDate = dayjs(new Date(this.query.startDate).getTime()).format(timeStamp[this.query.unit]);
      // this.query.endDate = dayjs(new Date(this.query.endDate).getTime()).format(timeStamp[this.query.unit]);
      service({
        url: 'refreshDataMonitor',//后端接口名称   先写一个，防止报错
        method: "post",
        data: this.object2FormData(this.query)
      }).then((res) => {
        this.tableLoading = false
        if (res.data.code == 200) {
          this.tableAllData = res.data.data;
          this.setTableData();
          this.pagination.total = res.data.data.length;
          if (this.tableData.length == 0 && this.pagination.currentPage != 1) {
            this.pagination.currentPage = 1;
            this.getTableData();
          }
          this.$notify({
            message: '刷新成功',
            type: 'success',
            position: "bottom-right",
            duration: 2000,
          });
        }
      }).catch((err) => {
        this.tableLoading = false
        this.tableData = []
      });
    },

    //获取表格数据 核心方法
    // getTableData(url = 'dataMonitor') {
    getTableData(url = 'dataMonitorDayDependondate') {
      this.tableLoading = true

      let _this = this, query = {}

      let timeStamp = {
        年: 'YYYY',
        月: 'YYYY-MM',
        // 周: 'week',
        周: 'YYYY-MM-DD',
        日: 'YYYY-MM-DD',
        小时: 'YYYY-MM-DD HH:mm:ss',
      }
      this.query.startDate = dayjs(this.query.startDate).format("YYYY-MM-DD")
      this.query.endDate = dayjs(this.query.endDate).format("YYYY-MM-DD")
      // this.query.startDate = dayjs(new Date(this.query.startDate).getTime()).format(timeStamp[this.query.unit]);
      // this.query.endDate = dayjs(new Date(this.query.endDate).getTime()).format(timeStamp[this.query.unit]);

      service({
        url: url,//后端接口名称   先写一个，防止报错
        method: "post",
        // data: this.query
        data: this.object2FormData(this.query)
      }).then((res) => {
        this.tableLoading = false
        if (res.data.code == 200) {
          this.tableAllData = res.data.data;
          this.setTableData();
          this.pagination.total = res.data.data.length;
          if (this.tableData.length == 0 && this.pagination.currentPage != 1) {
            this.pagination.currentPage = 1;
            this.getTableData();
          }
        }
      }).catch((err) => {
        this.tableLoading = false
        this.tableData = []
      });
    },

    getTableNameChList() {
      service({
        url: "getTableNameChList",
        method: "post"
      }).then(res => {
        this.tableNameCh = [
          // { label: "淘宝客竞品推广日表", value: "淘宝客竞品推广日表" },
        ]

        if (res.data.code == 200) {
          res.data.data.forEach(v => {
            this.tableNameCh.push({ label: v, value: v })
          })
        }
      })
    },

    // changeTableNameCh() {
    //   // console.log(1111, this.query.tableNameCh)

    //   if (this.query.tableNameCh.includes('小时')) {
    //     this.query.unit = '小时';
    //   } else if (this.query.tableNameCh.includes('日') || this.query.tableNameCh.includes('指标') || this.query.tableNameCh.includes('创意图片')) {
    //     this.query.unit = '日';
    //   } else if (this.query.tableNameCh.includes('周')) {
    //     this.query.unit = '周';
    //   } else if (this.query.tableNameCh.includes('月')) {
    //     this.query.unit = '月';
    //   } else if (this.query.tableNameCh.includes('年')) {
    //     this.query.unit = '年';
    //   }


    //   this.handleChangeTime(this.query.unit);

    // },

  },

  created() {
    // this.getShopList()
    this.getTableNameChList()
  }

}
</script>

<!-- <style scoped lang="less">
.tree-dom {
  float: right;

  ::v-deep .el-form-item__content {
    width: 240px;
    height: 300px;
    margin-top: 10px;
    overflow-y: auto;
  }
}

::v-deep {
  .search-input {
    width: 220px;
  }

  .el-tree-node__label {
    line-height: 26px;
  }
}


.search {
  .search-input {
    width: 150px;
  }
}
</style> -->

<style scoped lang="less">
.mainTable {
  background-color: #f1f2f9;
}
</style>